<script setup>
	import {
		useRouter
	} from 'vue-router';
	import {
		ref,
		reactive,
		toRefs
	} from 'vue';
	import {
		getlogin
	} from '@/api/user';
	let router = useRouter()
	import {
		showSuccessToast,
		showFailToast
	} from 'vant';

	import {
		useUserStore
	} from '@/stores/user'

	const {
		setUserInfo,
		setTokenExpired,
		setToken
	} = useUserStore();//hooks
//  数据  torefs  
// 方法 不要

	// let phone = ref('')
	// let password = ref('')

	const formData = reactive({
		username: '18339413550',
		password: '123456'
	})


	const dl = () => {
		// console.log(code.value);
		// 需要校验 
		getlogin(formData).then(res => {
			console.log(res);

			if (res.code === 0) {
				showSuccessToast(res.msg); //  提示   
		
		//  res.userInfo    昵称 头像  性别 
		// 存到菠萝
		setUserInfo(res.userInfo)
		setToken(res.token)
		setTokenExpired(res.tokenExpired)
	
		
		
				setTimeout(v => {
					router.back()
				}, 1000);
				
				// 为什么不适用跳转
				// router.push('/my?nickname='+res.userInfo.nickname)
				
			} else {
				showFailToast(res.msg);
			}


		})
	}
</script>

<template>
	<div class="ret">
		<div>
			<van-icon name="arrow-left" @click="back" size="30" />
			<!-- <span class="iconfont icon-fanhui"  ></span> -->
			<span @click="router.push('/enroll')">没有账号，去注册</span>
		</div>
	</div>
	<div class="txt">
		<h1>欢迎回来</h1>
	</div>
	<div class="cell">
		<div class="form">
			<div class="phonenum">
				<span class="num">
					+86
					<span class="iconfont icon-xia"></span>
				</span>
				<span class="inp">
					<input type="text" placeholder="请输入您的手机号" v-model="formData.username">

				</span>
			</div>
			<div class="password">
				<div class="pwd">
					<input type="password" placeholder="请输入您的密码" v-model="formData.password">
				</div>
			</div>
			<div class="repwb">
				<span>忘记密码?</span>
			</div>
		</div>
		<div class="butt">
			<div class="login" @click="dl">
				<span>登录</span>
			</div>
			<div class="code">
				<span>验证码登录</span>
			</div>
		</div>
		<van-divider :style="{borderColor: '#ccc'}">快捷登录</van-divider>
		<div class="wechat">
			<span class="iconfont icon-weixin"></span>
		</div>
	</div>
</template>

<style scoped>
@import url('./user.css');
</style>